<template>
  <div class="category-detail">
    <!-- 导航栏 -->
    <van-nav-bar
      :title="categoryName"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />

    <!-- 筛选栏 -->
    <div class="filter-bar">
      <van-dropdown-menu>
        <van-dropdown-item v-model="sortValue" :options="sortOptions" />
        <van-dropdown-item v-model="filterValue" :options="filterOptions" />
      </van-dropdown-menu>
    </div>

    <!-- 商品列表 -->
    <div class="product-list">
      <van-list
        v-model:loading="listLoading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="product-grid">
          <!-- 骨架屏占位 -->
          <ProductCard
            v-for="n in skeletonCount"
            v-show="loading"
            :key="`skeleton-${n}`"
            :product="skeletonProduct"
            :loading="true"
          />
          
          <!-- 实际商品列表 -->
          <ProductCard
            v-for="product in products"
            v-show="!loading"
            :key="product.id"
            :product="product"
            :loading="false"
            @click="goToDetail"
          />
        </div>
      </van-list>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import ProductCard from '@/components/ProductCard.vue'

const route = useRoute()
const router = useRouter()

// 分类信息
const categoryName = ref('')
const categoryId = ref('')

// 筛选和排序
const sortValue = ref(0)
const sortOptions = [
  { text: '综合排序', value: 0 },
  { text: '销量优先', value: 1 },
  { text: '价格从低到高', value: 2 },
  { text: '价格从高到低', value: 3 }
]

const filterValue = ref(0)
const filterOptions = [
  { text: '全部商品', value: 0 },
  { text: '有现货', value: 1 },
  { text: '促销商品', value: 2 }
]

//# 商品列表
const products = ref<any[]>([])
const loading = ref(true) // 初始加载状态
const listLoading = ref(false) // 列表加载更多状态
const finished = ref(false)

// 骨架屏配置
const skeletonCount = ref(6) // 显示6个骨架屏
const skeletonProduct = ref({
  id: 0,
  title: '',
  price: 0,
  image: '',
  sales: 0,
  rating: 0
})

// 模拟商品数据
const mockProducts = [
  {
    id: 1,
    title: '苹果 iPhone 15 Pro Max',
    price: 9999,
    image: 'https://img.yzcdn.cn/vant/apple-1.jpg',
    sales: 1234,
    rating: 4.8
  },
  {
    id: 2,
    title: '华为 Mate 60 Pro',
    price: 6999,
    image: 'https://img.yzcdn.cn/vant/apple-2.jpg',
    sales: 856,
    rating: 4.7
  },
  {
    id: 3,
    title: '小米 14 Ultra',
    price: 5999,
    image: 'https://img.yzcdn.cn/vant/apple-3.jpg',
    sales: 642,
    rating: 4.6
  },
  {
    id: 4,
    title: 'OPPO Find X7 Pro',
    price: 5499,
    image: 'https://img.yzcdn.cn/vant/apple-4.jpg',
    sales: 423,
    rating: 4.5
  }
]

// 加载商品数据
const onLoad = () => {
  listLoading.value = true
  
  setTimeout(() => {
    const startIndex = products.value.length
    const newProducts = mockProducts.slice(startIndex, startIndex + 2)
    
    if (newProducts.length) {
      products.value.push(...newProducts)
    } else {
      finished.value = true
    }
    
    listLoading.value = false
  }, 1000)
}

// 初始加载数据
const loadInitialData = () => {
  loading.value = true
  
  setTimeout(() => {
    // 模拟初始数据加载
    products.value = mockProducts.slice(0, 4)
    loading.value = false
  }, 1500) // 稍长的加载时间以展示骨架屏效果
}

// 跳转到商品详情
const goToDetail = (productId: number) => {
  router.push(`/product/${productId}`)
}

// 获取分类信息
const getCategoryInfo = () => {
  categoryId.value = route.params.id as string
  
  // 模拟分类名称映射
  const categoryMap: Record<string, string> = {
    '1': '手机数码',
    '2': '服装鞋包',
    '3': '家居生活',
    '4': '美妆护肤',
    '5': '食品生鲜',
    '6': '运动户外'
  }
  
  categoryName.value = categoryMap[categoryId.value] || '商品分类'
}

onMounted(() => {
  getCategoryInfo()
  loadInitialData()
})
</script>

<style scoped>
.category-detail {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.filter-bar {
  background: white;
  border-bottom: 1px solid #eee;
}

.product-list {
  padding: 10px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* 商品卡片样式已移至 ProductCard 组件 */
</style>